<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>OpenLayers v8.2.0 API - Module: ol/source/Vector</title>
  <script src="scripts/prettify/prettify.js"></script>
  <script src="scripts/prettify/lang-css.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
    crossorigin="anonymous"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
    crossorigin="anonymous">
  <link rel="stylesheet" type="text/css"
    href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css"
    crossorigin="anonymous">
  <link rel="stylesheet" type="text/css"
    href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css"
    href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="styles/prettify-tomorrow.css">
  <link rel="stylesheet" type="text/css" href="styles/jaguar.css">
  <link rel="stylesheet" type="text/css" href="styles/carbon.css">
  <link rel="stylesheet" type="text/css" href="/theme/ol.css">
  <link rel="stylesheet" type="text/css" href="/theme/site.css">
</head>

<body>
  <header class="navbar navbar-expand-sm navbar-dark mb-3 px-3 py-0 fixed-top" role="navigation">
    <a class="navbar-brand" href="/"><img src="/theme/img/logo-dark.svg" width="70" height="70"
        alt="">&nbsp;OpenLayers</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#olmenu"
      aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- menu items that get hidden below 768px width -->
    <nav class="collapse navbar-collapse" id="olmenu">
      <ul class="nav navbar-nav ms-auto">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-bs-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">Docs</a>
          <div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="docdropdown">
            <a class="dropdown-item" href="/doc/">Docs</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="/doc/quickstart.html"><i class="fa fa-check fa-fw me-2 fa-lg"></i>快速入门</a>
            <a class="dropdown-item" href="/doc/faq.html"><i class="fa fa-question fa-fw me-2 fa-lg"></i>常见问题</a>
            <a class="dropdown-item" href="/doc/tutorials/"><i class="fa fa-book fa-fw me-2 fa-lg"></i>教程</a>

          </div>
        </li>
        <li class="nav-item"><a class="nav-link" href="/en/latest/examples/">Examples</a></li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="apidropdown" role="button" data-bs-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            <i class="fa fa-sitemap me-1"></i>API
          </a>
          <div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="apidropdown">
            <a class="dropdown-item" href="/en/latest/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v8.2.0
              (latest)</a </div>
        </li>
      </ul>
    </nav>
  </header>

  <div class="container-fluid">
    <div id="wrap" class="row">
      <div class="navigation col-md-4 col-lg-3">
        <div class="search-wrapper">
          <div class="search">
            <input id="search" type="text" autocomplete="off" class="form-control input-sm"
              placeholder="Search Documentation">
          </div>
        </div>
        <div class="navigation-list-wrapper">
          <ul class="navigation-list search-empty">
            <li class="loading">Loading …
          </ul>
        </div>
      </div>

      <div class="main col-md-8 col-lg-9">
        <h1 class="page-title" data-filename="module-ol_source_Vector.html">Module: ol/source/Vector</h1>
        <div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
          <button id="latest-dismiss" type="button" class="btn-close" data-bs-dismiss="alert"
            aria-label="Close"></button>
          This documentation is for OpenLayers v<span id="package-version">8.2.0</span>. The <a id="latest-link"
            href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
        </div>




        <section class="content">

          <header>
            <h2 class="my-3">ol/source/Vector
            </h2>
            <br>




            <!-- <div class="row p-3 ">
              <div id="ad" class="col-lg-5 order-2 align-self-center border rounded bg-light ">
                <script async type="text/javascript"
                  src="https://cdn.carbonads.com/carbon.js?serve=CE7DV53U&placement=openlayersorg"
                  id="_carbonads_js"></script>
              </div>

            </div> -->
          </header>

          <article>
            <div class="container-overview">






              <dl class="details">





















              </dl>




            </div>










            <h3 class="subsection-title">Classes</h3>

            <dl>
              <dt><a href="module-ol_source_Vector.VectorSourceEvent.html">VectorSourceEvent</a></dt>
              <dd></dd>

              <dt><a href="module-ol_source_Vector-VectorSource.html">VectorSource</a></dt>
              <dd></dd>
            </dl>











            <h3 class="subsection-title">Type Definitions</h3>

            <dl>

              <dt class="">

                <div class="nameContainer">
                  <div class="anchor" id="~LoadingStrategy">
                  </div>
                  <h4 class="name">
                    LoadingStrategy<span class="signature">()</span>



                  </h4>

                  <div class="tag-source">
                    <a
                      href="https://github.com/openlayers/openlayers/blob/v8.2.0/src/ol/source/Vector.js">source/Vector.js</a>,
                    <a href="https://github.com/openlayers/openlayers/blob/v8.2.0/src/ol/source/Vector.js#L24">line
                      24</a>
                  </div>

                </div>


              </dt>
              <dd class="">




                <div class="description">
                  <p>函数接受一个<a
                      href="module-ol_extent.html#~Extent"><code>范围（Extent）</code></a>和分辨率（resolution）作为参数，并返回一个包含要加载的<a
                      href="module-ol_extent.html#~Extent"><code>Extent</code></a> 的数组。这通常是<a
                      href="module-ol_loadingstrategy.html"><code>ol/loadingstrategy</code></a>策略之一。</p>
                </div>











                <dl class="details">





















                </dl>













              </dd>



              <dt class="">
                <div class="nameContainer">
                  <div class="anchor" id="~Options">
                  </div>
                  <h4 class="name">
                    Options<span class="type-signature type object">{Object}</span>


                  </h4>
                </div>

              </dt>
              <dd class="">



                <dl class="details">


                  <h5 class="subsection-title">Properties:</h5>

                  <dl>

                    <table class="props">
                      <thead>
                        <tr>

                          <th>Name</th>


                          <th>Type</th>

                          <th class="last">Description</th>
                        </tr>
                      </thead>

                      <tbody>


                        <tr>

                          <td class="name"><code>attributions</code></td>


                          <td class="type">


                            <span class="param-type"><a
                                href="module-ol_source_Source.html#~AttributionLike">AttributionLike</a></span>

                            | undefined


                          </td>

                          <td class="description last">
                            <p>Attributions.</p>

                          </td>
                        </tr>



                        <tr>

                          <td class="name"><code>features</code></td>


                          <td class="type">


                            <span class="param-type">Array.&lt;FeatureClass></span>
                            |

                            <span class="param-type"><a
                                href="module-ol_Collection-Collection.html">Collection</a>&lt;FeatureClass></span>

                            | undefined


                          </td>

                          <td class="description last">
                            <p>特性。如果作为<a
                                href="module-ol_Collection-Collection.html"><code>Collection</code></a>提供，则源中的特性和集合中的特性将保持同步。
                            </p>

                          </td>
                        </tr>



                        <tr>

                          <td class="name"><code>format</code></td>


                          <td class="type">


                            <span class="param-type"><a
                                href="module-ol_format_Feature-FeatureFormat.html">FeatureFormat</a></span>

                            | undefined


                          </td>

                          <td class="description last">
                            <p>当设置了<code>url</code>时，XHR特性加载器使用的特性格式。如果设置了<code>url</code>，则此属性为必需，否则将被忽略。</p>

                          </td>
                        </tr>



                        <tr>

                          <td class="name"><code>loader</code></td>


                          <td class="type">


                            <span class="param-type"><a
                                href="module-ol_featureloader.html#~FeatureLoader">FeatureLoader</a></span>

                            | undefined


                          </td>

                          <td class="description last">
                            <p>
                              加载器函数，用于从远程源加载特性。如果未设置此函数但设置了<code>url</code>，则数据源将创建并使用XHR特性加载器。只有当<code>success</code>和<code>failure</code>的回调函数被使用时，
                              <code>'featuresloadend'</code> and <code>'featuresloaderror'</code>事件才会触发。
                            </p>
                            <p>示例：</p>
                            <pre class="prettyprint source lang-js"><code>import Vector from 'ol/source/Vector.js';
import GeoJSON from 'ol/format/GeoJSON.js';
import {bbox} from 'ol/loadingstrategy.js';

const vectorSource = new Vector({
  format: new GeoJSON(),
  loader: function(extent, resolution, projection, success, failure) {
     const proj = projection.getCode();
     const url = 'https://ahocevar.com/geoserver/wfs?service=WFS&' +
         'version=1.1.0&request=GetFeature&typename=osm:water_areas&' +
         'outputFormat=application/json&srsname=' + proj + '&' +
         'bbox=' + extent.join(',') + ',' + proj;
     const xhr = new XMLHttpRequest();
     xhr.open('GET', url);
     const onError = function() {
       vectorSource.removeLoadedExtent(extent);
       failure();
     }
     xhr.onerror = onError;
     xhr.onload = function() {
       if (xhr.status == 200) {
         const features = vectorSource.getFormat().readFeatures(xhr.responseText);
         vectorSource.addFeatures(features);
         success(features);
       } else {
         onError();
       }
     }
     xhr.send();
   },
   strategy: bbox,
 });</code></pre>

                          </td>
                        </tr>



                        <tr>

                          <td class="name"><code>overlaps</code></td>


                          <td class="type">


                            <span class="param-type">boolean</span>



                            <br>(defaults to true)


                          </td>

                          <td class="description last">
                            <p>此数据源可能存在重叠的几何图形。将此设置为
                              <code>false</code> （例如，对于表示行政边界或多边形TopoJSON源的多边形源）允许渲染器优化填充和描边操作。
                            </p>

                          </td>
                        </tr>



                        <tr>

                          <td class="name"><code>strategy</code></td>


                          <td class="type">


                            <span class="param-type"><a
                                href="module-ol_source_Vector.html#~LoadingStrategy">LoadingStrategy</a></span>

                            | undefined


                          </td>

                          <td class="description last">
                            <p>要使用的加载策略。默认情况下，使用<a
                                href="module-ol_loadingstrategy.html#.all"><code>all</code></a>策略，即一次性加载所有特性。</p>

                          </td>
                        </tr>



                        <tr>

                          <td class="name"><code>url</code></td>


                          <td class="type">


                            <span class="param-type">string</span>
                            |

                            <span class="param-type"><a
                                href="module-ol_featureloader.html#~FeatureUrlFunction">FeatureUrlFunction</a></span>

                            | undefined


                          </td>

                          <td class="description last">
                            <p>设置此选项将指示数据源使用XHR加载器
                              (参见<a
                                href="module-ol_featureloader.html#.xhr"><code>xhr</code></a>)加载特性。使用<code>string</code>和<a
                                href="module-ol_loadingstrategy.html#.all"><code>all</code></a>从给定的URL一次性下载所有特性。
                              使用<a
                                href="module-ol_featureloader.html#~FeatureUrlFunction"><code>FeatureUrlFunction</code></a>
                              与其他加载策略一起生成url。还需要设置格式。当提供默认的XHR特性加载器时，将在解析过程中将数据投影的特性转换为视图投影。如果您的远程数据源没有正确声明其投影，则此转换将不正确。
                              对于某些格式，可以通过在格式上设置dataProjection构造函数选项来覆盖默认投影（通常为EPSG:4326）。请注意，如果源包含非特性数据，如GeoJSON几何图形或KML
                              NetworkLink，则这些将被忽略。使用自定义加载器加载这些。
                            </p>

                          </td>
                        </tr>



                        <tr>

                          <td class="name"><code>useSpatialIndex</code></td>


                          <td class="type">


                            <span class="param-type">boolean</span>



                            <br>(defaults to true)


                          </td>

                          <td class="description last">
                            <p>默认情况下，使用RTree作为空间索引。当特性频繁地被移除和添加，并且特性的总数较低时，将此设置为<code>false</code>可能会提高性能。
                            </p>
                            <p>请注意，当<code>useSpatialIndex</code>设置为<code>false</code>时，无法使用
                              <a
                                href="module-ol_source_Vector-VectorSource.html#getFeaturesInExtent"><code>getFeaturesInExtent</code></a>,
                              <a
                                href="module-ol_source_Vector-VectorSource.html#getClosestFeatureToCoordinate"><code>getClosestFeatureToCoordinate</code></a>
                              and
                              <a href="module-ol_source_Vector-VectorSource.html#getExtent"><code>getExtent</code></a>，
                              而 <a
                                href="module-ol_source_Vector-VectorSource.html#forEachFeatureInExtent"><code>forEachFeatureInExtent</code></a>
                              将遍历所有特性。
                            </p>
                            <p>当设置为<code>false</code>时, 特性将保存在一个
                              <a href="module-ol_Collection-Collection.html"><code>Collection</code></a>中，可以通过
                              <a
                                href="module-ol_source_Vector-VectorSource.html#getFeaturesCollection"><code>getFeaturesCollection</code></a>检索。
                            </p>

                          </td>
                        </tr>



                        <tr>

                          <td class="name"><code>wrapX</code></td>


                          <td class="type">


                            <span class="param-type">boolean</span>



                            <br>(defaults to true)


                          </td>

                          <td class="description last">
                            <p>水平包裹世界。为使跨越-180°和180°经线的矢量编辑正常工作，应将其设置为<code>false</code>。因此，生成的几何坐标将超出世界范围。</p>

                          </td>
                        </tr>


                      </tbody>
                    </table>
                  </dl>






















                </dl>



              </dd>

            </dl>



          </article>

        </section>




      </div>
    </div>
  </div>
  <script>prettyPrint();</script>
  <script src="scripts/linenumber.js"></script>
  <script src="scripts/main.js"></script>
</body>

</html>